<template>
  <transition name="topic-topic-content-component">
    <el-dialog
      v-if="showTopicContent"
      :title="topicTitle"
      class="topic-content-component"
      :visible.sync="showTopicContent"
      width="500px"
      @close="closeContent()"
    >
      <el-form
        ref="formInfo"
        :model="formInfo"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item prop="GATHER_SNO" label="采编流水号" required>
          <el-input v-model="formInfo.GATHER_SNO" />
        </el-form-item>
        <el-form-item prop="ORDER_DATE" label="采编日期" >
          <el-input v-model="formInfo.ORDER_DATE" />
        </el-form-item>
        <el-form-item prop="MEETING_ID" label="股东大会ID" >
          <el-input v-model="formInfo.MEETING_ID" />
        </el-form-item>
        <el-form-item prop="INTERNAL_MEETING_ID" label="公司部股东大会ID" >
          <el-input v-model="formInfo.INTERNAL_MEETING_ID" />
        </el-form-item>
        <el-form-item prop="SEC_CODE" label="证券代码" >
          <el-input v-model="formInfo.SEC_CODE" />
        </el-form-item>
        <el-form-item prop="SEC_ABBR" label="证券简称" >
          <el-input v-model="formInfo.SEC_ABBR" />
        </el-form-item>
        <el-form-item prop="MEETING_NAME" label="股东大会名称" >
          <el-input v-model="formInfo.MEETING_NAME" />
        </el-form-item>
        <el-form-item prop="TOPIC_NO" label="议案号" >
          <el-input v-model="formInfo.TOPIC_NO" />
        </el-form-item>
        <el-form-item prop="TOPIC_NAME" label="议案名称" >
          <el-input v-model="formInfo.TOPIC_NAME" />
        </el-form-item>
        <el-form-item prop="MUST_SELECT_NUM" label="累积投票应选数" >
          <el-input v-model="formInfo.MUST_SELECT_NUM" />
        </el-form-item>
        <el-form-item prop="IS_CASH_DIVIDEND" label="是否涉及现金分红" >
          <el-input v-model="formInfo.IS_CASH_DIVIDEND" />
        </el-form-item>
        <el-form-item prop="IS_MAJOR" label="是否涉及重大事项" >
          <el-input v-model="formInfo.IS_MAJOR" />
        </el-form-item>
        <el-form-item prop="A_CODE" label="A股产品代码" >
          <el-input v-model="formInfo.A_CODE" />
        </el-form-item>
        <el-form-item prop="B_CODE" label="B股代码" >
          <el-input v-model="formInfo.B_CODE" />
        </el-form-item>
        <el-form-item prop="PRIORITY_CODE" label="优先股代码" >
          <el-input v-model="formInfo.PRIORITY_CODE" />
        </el-form-item>
        <el-form-item prop="RECOVERY_PRIORITY_CODE" label="恢复表决权的优先股代码" >
          <el-input v-model="formInfo.RECOVERY_PRIORITY_CODE" />
        </el-form-item>
        <el-form-item prop="TRADEMARKET" label="交易市场" >
          <el-input v-model="formInfo.TRADEMARKET" />
        </el-form-item>
        <el-form-item prop="CUMULATIVE_VOTE_TYPE" label="累积投票类型" >
          <el-input v-model="formInfo.CUMULATIVE_VOTE_TYPE" />
        </el-form-item>
        <el-form-item prop="SPECIAL_CODE" label="特别表决权代码" >
          <el-input v-model="formInfo.SPECIAL_CODE" />
        </el-form-item>
        <el-form-item prop="SPECIAL_CODE_TYPE" label="特别表决权代码类型" >
          <el-input v-model="formInfo.SPECIAL_CODE_TYPE" />
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button
            type="primary"
            @click="submitForm()"
          >确定</el-button>
          <el-button @click="closeContent()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  name: 'TopicContentComponent',
  props: {
    topicTitle: {
      type: String,
      default: '投票议案'
    },
    itemInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      showTopicContent: false,
      formInfo: JSON.parse(JSON.stringify(this.itemInfo))
    }
  },
  methods: {
    // 保存操作
    submitForm() {
      const that = this
      // const params = Object.assign(that.formInfo, {})
      that.$store.dispatch('editing/updateTopicInfo', that.formInfo).then(
        res => {
          if (res.data) {
            console.log(res.data)
          }
        }
      )
      this.showTopicContent = false
      this.$refs['formInfo'].resetFields()
      this.$emit('updateForm', that.formInfo['GATHER_SNO'])
    },
    // 关闭弹框
    closeContent() {
      this.showTopicContent = false
      this.$refs['formInfo'].resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in 0.3s;
  animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out 0.3s;
  animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
</style>
